import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    WhiteSpace,
    ActionSheet,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import Moment from 'moment';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import MyListView from '../../components/MyListView/MyListView';
import MyListViewLz from '../../components/MyListViewLz/MyListViewLz';
import DistributionCarousel  from '../distribution/distributionCarousel';
import {routerRedux} from "dva/router";
import {shopOpenGroup} from './shopOpenGroup.less';
import ShopOpenGroupItem from "./shopOpenGroupItem";
import  caidan from'../../assets/svg/caidan.svg';
import updown1 from '../../assets/svg/updown1.svg';
import updown2 from '../../assets/svg/updown2.svg';
import updown3 from '../../assets/svg/updown3.svg';
import {goto_search_title} from "../search/GotoSearch.less";
import {fenlei, noguanzhu} from "../find/findIndex.less";
import {goods_search_header} from "../search/GoodsSearch.less";
import NavTopBar from '../../components/NavTopBar/NavTopBar';

const Item = Popover.Item;




class ShopOpenGroup extends Component {
    constructor(props){
        super(props);
        this.state={
            modal:false,
            tabs:[],
            value:""
        };

        this.AlloyTouch = null;
        this.typeId = "";
        this.title = "";
        this.page=0;
        this.timer = null;
        this.tabs=[{title:"全部",typeId:"abc"}];
    }

    componentDidMount(){
        this.props.dispatch({ type: 'shopOpenGroup/groupIndexEFF'}).then(result=>{
            console.log(result)
            if(result.code==200){
                console.log(result)
                result.ret.typeList.map((item)=>{
                    this.tabs.push({title:item.typeName,typeId:item.typeId,})
                });
                this.setState({
                    tabs:this.tabs
                })
                this.timer = setInterval(this.groupIndex, 5000, 5000)

            }
        });
        this.refresh();
    }
    groupIndex=()=>{
        this.props.dispatch({type:"shopOpenGroup/groupIndexEFF"})
    }
    onChange = (e) => {
        this.setState({
            value: e.target.value
        });
    };
    refresh = () => {
        return this.props.dispatch({ type: 'shopOpenGroup/groupGoodsEFF',obj:{typeId:this.typeId,pageNo:1} });
    }

    loadMore = () => {
        return this.props.dispatch({ type: 'shopOpenGroup/groupGoodsEFF', obj:{typeId:this.typeId,pageNo:this.props.shopOpenGroup.pageNo+1} });
    }
    componentWillUnmount(){
        //console.log(2);
        if(this.timer!=null){
            clearTimeout(this.timer);
        }
    }
    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };
    showModal = (e) => {
        this.setState({
            modal: true,
        });
    };
    onClose = () => {
        this.setState({
            modal: false,
        });
    };
    renderContent = tab =>{
        const {dispatch,shopOpenGroup} = this.props;

        const {groupAdvList=[],groupGoodsList=[],latestOpenGroupList=[]} = this.props.shopOpenGroup;
        return <div style={{height:"100%"}}>
            <DistributionCarousel data={groupAdvList} newGroup={true} latestOpenGroupList={latestOpenGroupList}></DistributionCarousel>
            {groupGoodsList[0]?<MyListViewLz
                style={{height:"100%"}}
                kid={tab.typeId}
                cc={true}
                getAlloyTouch={ this.getAlloyTouch }
                refresh={ this.refresh }
                loadMore={ this.loadMore }
                hasMore={ this.props.shopOpenGroup.pageNo * this.props.shopOpenGroup.pageSize < this.props.shopOpenGroup.totalRows  }
                // itemWrapperClass={ goods_list }
                // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                renderItem={(v,i,a)=>{
                    return <ShopOpenGroupItem v={v} refresh={this.refresh} key={i} dispatch={dispatch}></ShopOpenGroupItem>
                }}
                data={ groupGoodsList }>
            </MyListViewLz>:<div style={{width: "100%", height: "8rem", background: "#f6f6f6"}}>
                <img src={ require('../../assets/img/noGoods.png')} style={{display: "block", margin: "3rem auto 0"}} />
                <p style={{fontSize: ".3rem", padding: ".2rem 0 .3rem", textAlign: "center", color: "#b9b9b9"}}>当前暂无商品...</p>
            </div>}
        </div>


    }

    render() {
        const {dispatch} = this.props;
        console.log(this.tabs)
        const {value} = this.state;
        return ( <Flex direction="column" className={shopOpenGroup} style={{height:"100%"}}>
                <NavTopBar title="拼团" dispatch={this.props.dispatch} rightContent={<Icon type={caidan.id} style={{marginRight:".3rem"}} onClick={()=>this.showModal()}></Icon>}/>
                {this.tabs.length>1?<Tabs tabs={this.state.tabs} swipeable={false} initialPage={0} page={this.page}  onChange={(tab, index) => {
                    let typeId = tab.typeId;
                    let title = tab.title;
                    this.page=index;
                    if(index==0) {this.typeId="";this.title="";}
                    else  {this.typeId=typeId;this.title=title;}
                    this.refresh();

                }} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4} />}>
                    {this.renderContent}
                </Tabs>:""}


                <Modal
                    popup
                    visible={this.state.modal}
                    onClose={this.onClose}
                    animationType="slide-down"
                    className={fenlei}
                >
                    <WingBlank>
                        <Flex  wrap="wrap" style={{width:"100%",padding:".3rem 0",backgroundColor:"#f3f3f3"}}>
                            {this.tabs.map((item,i)=>{
                                return <div key={i} style={i==this.page?{color:"#fff",width:"25%",textAlign:"center"}:{width:"25%",textAlign:"center"}}>
                                    <div style={i==this.page?{display:"inline-block",textAlign:"center",background:"#ff0036",marginBottom:".3rem",padding:".05rem .1rem",width:"80%",borderRadius:".3rem"}:{display:"inline-block",textAlign:"center",background:"#fff",marginBottom:".3rem",padding:".05rem .1rem",width:"80%",borderRadius:".3rem"}}
                                         onClick={(e)=>{
                                             this.page = i;
                                             if(i==0) this.typeId="";
                                             else  this.typeId=item.typeId;
                                             this.refresh();
                                             this.onClose();
                                         }}>{item.title}</div>
                                </div>
                            })}
                        </Flex>
                    </WingBlank>

                </Modal>
            </Flex>

        )


    }
}

export default connect(({ shopOpenGroup }) => ({ shopOpenGroup}))(ShopOpenGroup);
